<template>
	<view class="look_proof" v-if="isend">
		<view class="title">
			<view class="h4">
				<view class="span">
					<view class="pic1">
						<image src="../../static/images/i5.png" mode="widthFix"></image>
					</view>
					商户会员注册码
					<view class="pic2">
						<image src="../../static/images/i5.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="web_look_code">
			<view class="con">
				<view class="txt">
					<view class="p"><view class="span">1</view>第一步扫二维码</view>
					<view class="p"><view class="span">2</view>第二步填写基本信息</view>
				</view>
				<view class="coed">
					<!-- <image src="../../static/images/pic5.jpg" mode="widthFix"></image> -->
					
					<image :src="qrcodeSrc" mode="widthFix"></image>
					<view class="hao">
						商户号：<text>{{info.merchant.merchantno}}</text>
					</view>
				</view>				
			</view>
		</view>
		
		
		<canvas style="top: 150%;position: fixed;" canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
		
		<view class="web_look_code_btn">
			<view>
				<!-- <image src="../../static/images/i6.png" mode="widthFix"></image> -->
				<text>长按二维码保存到相册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '../../static/js/uqrcode.js'
	export default {
		data() {
			return {
				qrcodeSize: 200,
				qrcodeSrc:'',
				info:[],
				isend:false,
			}
		},
		onLoad() {
			let that = this;
			
			that.GetUserMass();
			
			
		},
		methods: {			
			GetUserMass: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'user', '', function(res) {
					uni.hideLoading();
					console.log(res.data)
					that.info = res.data;
					that.isend = true;
					that.make();
				});
			},
			
			
			Save: function() {
				let that = this;
				uni.getImageInfo({
					src: that.qrcodeSrc,
					success: function(image) {
						console.log(image.path);						
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
							}
						});
					},
					complete:function(res){
						
					}
				});
			},
			
			
			make() {
				let that = this;
				uni.showLoading({
					title: '二维码生成中',
					mask: true
				})			
				uQRCode.make({
					canvasId: 'qrcode',
					text: that.common.CommLink() + 'h5/#/pages/login/one?shopno=' + that.info.merchant.merchantno,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
					},
					complete: (res) => {
						
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style scoped>
	.look_proof {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url('@/static/images/pic4.jpg');
		background-size: 100% 100%;
		overflow-y: auto;padding-bottom: 80rpx;
	}
	/* #ifdef H5 */
	.look_proof {
		 top: 44px;
	}
	/* #endif */

	.title {
		padding: 100rpx 0;
	}

	.title .h4 {
		font-size: 62rpx;
		color: #2c2f37;
		text-align: center;
	}

	.title .h4 .span {
		display: inline-block;
		position: relative;
	}

	.title .h4 .pic1 {
		position: absolute;
		left: -30rpx;
		top: -70rpx;
	}

	.title .h4 .pic1 image {
		width: 40rpx;
	}

	.title .h4 .pic2 {
		position: absolute;
		right: -80rpx;
		top: 10%;
	}

	.title .h4 .pic2 image {
		width: 50rpx;
	}
</style>